import React from "react"
import { FightInfoInstance } from "../../models/event-detail/fight-info"
import { Image, ImageStyle, ViewStyle, Text, View, TextStyle } from "react-native"
import { px2dp } from "../../utils"
import { color } from "../../theme"
import { inject, observer } from "mobx-react"

export interface FightInfoProps {
  info: FightInfoInstance
}

const fightInfoBoxStyle: ViewStyle = {
  height: px2dp(122),
  width: px2dp(342),
  backgroundColor: color.palette.white,
  opacity: 0.8,
  borderRadius: px2dp(8),
  flexDirection: "column",
  alignContent: "center"
}

const teamBoxStyle: ViewStyle = {
  height: "100%",
  width: px2dp(60),
  justifyContent: "center"
}

const teamIconStyle: ImageStyle = {
  height: px2dp(54),
  width: px2dp(37.4)
}

const teamNameStyle: TextStyle = {
  fontFamily: "PingFangSC-Medium",
  fontSize: px2dp(12),
  color: "#121317",
  letterSpacing: 0,
  textAlign: "center"
}

const scoreBoxStyle: ViewStyle = {
  height: "100%"
}

const scoreTextStyle: TextStyle = {
  fontFamily: "DINAternate-Blod",
  fontSize: px2dp(30),
  color: "#dc1111",
  letterSpacing: 0
}
@inject("rootStore")
@observer
export class FightInfo extends React.Component<FightInfoProps> {
  render() {
    // const { fightInfo } = this.props.rootStore.eventDetailStore;
    return (
      <View style={fightInfoBoxStyle}>
        <View style={teamBoxStyle}>
          <Image style={teamIconStyle} source={1} />
          <Text style={teamNameStyle}>{"主队"}</Text>
        </View>
        <View style={scoreBoxStyle}>
          <Text style={scoreTextStyle}>{`${136}-${126}`}</Text>
        </View>
        <View style={teamBoxStyle}>
          <Image style={teamIconStyle} source={2} />
          <Text style={teamNameStyle}>{"客队"}</Text>
        </View>
      </View>
    )
  }
}
